/*
 * @Author: linxun 
 * @Date: 2021-03-06 10:41:11 
 * @Last Modified by: linxun
 * @Last Modified time: 2021-04-06 11:10:03
 * @Description: 数据集列表头部
 */

import React, { Fragment } from 'react';
import { useIntl, Link, history } from 'umi';
import { Button, Row, Col, Input, Select, Cascader, Alert } from 'antd';
import { SyncOutlined } from '@ant-design/icons';

import styles from '../index.less';

const { Search } = Input;
const { Option } = Select;

const TableHeader = props => {
  const { formatMessage } = useIntl();
  const {
    onSelectChange,
    onSearch,
    onSearchChange,
    searchVal,
    labelTypes,
    labelStatus,
    curTab, // 1-原始数据集 2-已发布数据集
    onRefresh,
    isPublic,
    searchValue,
  } = props;

  return (
    <Fragment>
      <Alert
        message='已发布数据集来源于原始数据集，不能自己创建，原始数据集要完成全部数据标注才能发布，已发布数据集不能修改，可以用于模型训练/评估使用'
        showIcon
        className={styles.row}
      />
      <Row className={styles.row}>
        <Col span={curTab === '1' ? 11 : 15}>
          {curTab === '1' &&
            <Button
              type='primary'
              onClick={() => history.push(`/${isPublic ? 'public' : 'QIP'}/dataManage/dataSet/add`)}
              className={styles.btn}
            >{formatMessage({ id: 'dataSet.dataSet.add' })}</Button>
          }
        </Col>
        <Col span={4} className={styles.col}>
          <Select
            onChange={value => onSelectChange(value, 'annotType')}
            value={searchValue.annotType}
            className={styles.select}
            placeholder={formatMessage({ id: 'dataSet.dataSet.labelTypes.placeholder' })}
            allowClear
          >
            {labelTypes.map(item => (
              <Option key={item.value} disabled={item.disabled}>{item.label}</Option>
            ))}
          </Select>
        </Col>
        {curTab === '1' &&
          <Col span={4} className={styles.col}>
            <Select
              onChange={value => onSelectChange(value, 'annotStatus')}
              value={searchValue.annotStatus}
              className={styles.select}
              placeholder={formatMessage({ id: 'dataSet.dataSet.status.placeholder' })}
              allowClear
            >
              {labelStatus.map(item => (
                <Option key={item.value} disabled={item.disabled}>{item.label}</Option>
              ))}
            </Select>
          </Col>
        }
        {/* <Col span={4} className={styles.col}>
          <Search
            placeholder={formatMessage({ id: 'dataSet.dataSet.search.label.placeholder' })}
            enterButton
            onSearch={value => onSearch(value, 'labelName')}
          />
        </Col> */}
        <Col span={5} className={styles.col}>
          <Search
            placeholder={formatMessage({ id: 'dataSet.dataSet.search.name.placeholder' })}
            enterButton
            onSearch={value => onSearch(value, 'name')}
            onChange={(e) => onSearchChange(e, 'name')}
            value={searchVal.name}
            className={styles.search}
          />
          <Button
            onClick={onRefresh}
            icon={<SyncOutlined />}
            style={{ marginLeft: 12 }}
          />
        </Col>
      </Row>
    </Fragment>
  )
}

export default TableHeader;